import React from 'react';
import { Form, Input, Select } from 'antd';
import LimitInput from '@/components/LimitInput';
import { IconSelector } from '@/pages/Setting/Privilege/components/PrivilegeIcon';
import useDictionary from '@/hooks/useDictionary';
import styles from './index.less';

const { Option } = Select;

const INPUT_WIDTH = 362;

// 权限管理-基础设置
const BasicSetting = React.forwardRef(({ form, detailData }, ref) => {
    const { getFieldDecorator } = form;

    // 模板分组字典数据
    const [roleModuleTypeList] = useDictionary('roleModuleType');

    return (
        <Form layout="inline" className={styles.basicSettingWrap} ref={ref}>
            <div className={styles.row}>
                <Form.Item label="模板名称(中文)">
                    {getFieldDecorator('nameZh', {
                        rules: [
                            {
                                required: true,
                                message: '请输入模板名称（中文）'
                            }
                        ]
                    })(<Input maxLength={100} style={{ width: INPUT_WIDTH }} placeholder="请输入" />)}
                </Form.Item>
            </div>
            <div className={styles.row}>
                <Form.Item label="模板名称(英文)">
                    {getFieldDecorator('nameEn')(
                        <Input maxLength={100} style={{ width: INPUT_WIDTH }} placeholder="请输入" />
                    )}
                </Form.Item>
            </div>
            <div className={styles.row}>
                <Form.Item label="模板分组">
                    {getFieldDecorator('type', {
                        rules: [
                            {
                                required: true,
                                message: '请选择模板分组'
                            }
                        ]
                    })(
                        <Select style={{ width: INPUT_WIDTH }} placeholder="请选择" allowClear>
                            {roleModuleTypeList?.map(item => (
                                <Option value={Number(item.value)} key={item.value}>
                                    {item.text}
                                </Option>
                            ))}
                        </Select>
                    )}
                </Form.Item>
            </div>
            <div className={styles.row}>
                <Form.Item label="模版图标">
                    {getFieldDecorator('icon', {
                        rules: [
                            {
                                required: true,
                                message: '请选择图标'
                            }
                        ]
                    })(<IconSelector defaultVal={detailData?.icon} defaultSelectFirstOption />)}
                </Form.Item>
            </div>
            <div className={styles.row}>
                <Form.Item label="模板简介(中文)">
                    {getFieldDecorator('remarkZh', {
                        rules: [
                            {
                                required: true,
                                message: '请输入模板简介(中文)'
                            },
                            {
                                max: 4000,
                                message: '最多输入4000个字符'
                            }
                        ]
                    })(
                        <LimitInput
                            style={{ width: INPUT_WIDTH }}
                            area
                            maxLength={4000}
                            placeholder="请输入"
                            autoSize={{ minRows: 10, maxRows: 20 }}
                        />
                    )}
                </Form.Item>
            </div>
            <div className={styles.row}>
                <Form.Item label="模板简介(英文)">
                    {getFieldDecorator('remarkEn', {
                        rules: [
                            {
                                max: 4000,
                                message: '最多输入4000个字符'
                            }
                        ]
                    })(
                        <LimitInput
                            style={{ width: INPUT_WIDTH }}
                            area
                            maxLength={4000}
                            placeholder="请输入"
                            autoSize={{ minRows: 10, maxRows: 20 }}
                        />
                    )}
                </Form.Item>
            </div>
        </Form>
    );
});

export default BasicSetting;
